<template>
  <header class="app-header">
    <div class="app-header-navbar white shadow-4 border-bottom pc-model">
      <div class="app-header-main">
        <router-link
          target="_self"
          aria-current="page"
          to="/">
          <a class="app-header-logo active" aria-current="page">
            <img src="https://s1.ax1x.com/2023/07/15/pC5UnQe.png" />
            <span>{{glabledata.glableSitTitle}}</span>
          </a>
        </router-link>
        <div class="app-header-nav nav">
          <router-link
            target="_self"
            class="nav-link"
            :class="message1"
            aria-current="page"
            to="/">
              首页
          </router-link>
          <router-link
            target="_self"
            class="nav-link"
            :class="message2"
            to="/vue3">
              Vue3
          </router-link>
          <router-link
            target="_self"
            class="nav-link"
            :class="message3"
            to="/pinia">
              pinia
          </router-link>
          <router-link
            target="_self"
            class="nav-link display-top"
            :class="message5"
            to="/element-plus">
              Element Plus
          </router-link>
          <router-link
            target="_self"
            class="nav-link "
            :class="message4"
            to="/tuniao">
              图鸟UI
          </router-link>
        </div>
        <a class="actions" style="cursor: pointer" @click="to('/about')">
          <div class="app-header-user">
            <div class="login-button">
              <span class="logintext">联系我们</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
import router from "@/router";

export default ({
  name: 'Top',
  data() {
    return {
    }
  },
  props: ['message1', 'message2', 'message3', 'message4', 'message5'],
  setup() {
  },
  computed: {
    ...mapState(['glabledata'])
  },
  methods: {
    to(url) {
      router.push(url)
    }
  }
})
</script>

<style scoped>
@import "../../static/mycss/margin_top.css";

.login-button {
  height: 30px;
  width: 100px;
  color: #fff;
  background: linear-gradient(125deg, #18cef2 0%, #448aff 100%);
  line-height: 50px;
  transition: transform 0.1s;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 4px 3px 10px #2f6bd024;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50px 50px 50px 50px;
}
.logintext {
  font-size: 15px;
  text-align: center;
  line-height: 90px;
}
</style>
<style lang="scss" scoped>
.dialogdeep {
  ::v-deep .el-dialog--center {
    border-radius: 18px;
  }
}
.avatartext {
  display: flex;
}
.spans {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  margin-left: 5px;
  font-weight: bold;
}
.qqloginsvg {
  display: flex;
  width: 31px;
}
</style>
<style >
@media screen and (max-width:991px) {
  .display-top {
    display: none;
  }
}
</style>
